<template>
  <n-tabs type="segment" style="height: 100%">
    <n-tab-pane name="basic" style="height: 100%" tab="数据集配置">
      <div class="tab-wrapper" v-if="dataset">
        <div class="top">
          <n-upload
            directory-dnd
            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
            :max="1"
            style="padding: 0px; box-sizing: border-box"
            :show-file-list="false"
          >
            <n-upload-dragger>
              <div v-if="!dataset.img">
                <div style="margin-bottom: 12px">
                  <img
                    src="http://124.221.115.232:8018/static/png/noImage.png"
                    alt=""
                    style="object-fit: contain; width: 120px"
                  />
                </div>
                <n-p depth="3" style="margin: 8px 0 0 0">
                  最大不能超过1M,最好使用PNG格式
                </n-p>
              </div>
              <div v-else>
                <img
                  :src="dataset.img"
                  alt=""
                  style="object-fit: contain; width: 120px"
                />
              </div>
            </n-upload-dragger>
          </n-upload>
          <SettingItem name="名称">
            <n-input
              size="small"
              v-model:value="dataset.name"
              placeholder="请输入数据集名称"
            ></n-input>
          </SettingItem>
          <SettingItem name="UUID">
            <n-input
              size="small"
              placeholder="请输入UUID"
              v-model:value="dataset.pid"
            ></n-input>
          </SettingItem>

          <SettingItem name="创建者">
            <div class="user">
              <n-avatar
                size="small"
                :src="'https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F7c7adc8ccc524163921d2d403f1f3c5b_d7f6b05214f24a6a842f2acaa2e30146_buoumao-zhongdianse.png'"
              >
              </n-avatar>
              <span>{{ "管理员" }}</span>
            </div>
          </SettingItem>

          <SettingItem name="是否显示">
            <div style="display: flex">
              <n-switch
                v-model:value="dataset.status"
                size="large"
                :round="false"
                :checked-value="1"
                :unchecked-value="0"
              />
            </div>
          </SettingItem>
          <SettingItem name="初始坐标">
            <div style="display: flex">
              <n-input
                pair
                separator="-"
                :placeholder="['经度', '纬度']"
                clearable
                size="small"
                v-model:value="dataset.location.coordinates"
              />
              <n-button
                type="primary"
                size="small"
                quaternary
                style="margin-left: 6px"
                v-if="!isRecord"
                @click="handleRecord"
                >监听</n-button
              >
              <n-button
                type="error"
                size="small"
                quaternary
                style="margin-left: 6px"
                v-if="isRecord"
                @click="handleRecordComplete"
                >完成</n-button
              >
              <!-- <n-select
              style="width: 200px"
              size="small"
              :options="mapStyleOptions"
              @update:value="handleStyleSelect"
            ></n-select> -->
            </div>
          </SettingItem>
          <SettingItem name="初始缩放">
            <n-slider
              :min="1"
              :max="18"
              v-model:value="dataset.scale"
            ></n-slider>
          </SettingItem>
          <SettingItem name="地图风格">
            <div style="display: flex">
              <n-select
                style="width: 200px"
                size="small"
                :options="mapStyleOptions"
                v-model:value="dataset.style"
                @update:value="handleStyleSelect"
              ></n-select>
            </div>
          </SettingItem>
        </div>
        <div class="bottom">
          <n-button
            @click="handleConfirm"
            class="bottom-button"
            type="success"
            secondary
            stronger
            >保存</n-button
          >
        </div>
      </div>
      <div v-else>-- 请选择数据集 --</div>
    </n-tab-pane>
  </n-tabs>
</template>

<script lang="ts" setup>
import { Map } from "mapbox-gl";
import SettingItem from "./components/item.vue";
import SettingCollapse from "./components/collapse.vue";
import { LocationOutline } from "@vicons/ionicons5";
import { useMapStore } from "@/store/map";
import { computed, watch, ref } from "vue";
import { useEventBus } from "@vueuse/core";
import { IDataset } from "@/struct";
import { updateDataset } from "@/api";
import { useMessage } from "naive-ui";
import WKT from "terraformer-wkt-parser";
const message = useMessage();
const isRecord = ref(false);
const mapStore = useMapStore();
const dataset = computed(() => {
  return mapStore.datasetInfo as IDataset;
});
const mapBus = useEventBus("map");
const mapStyleOptions = [
  {
    label: "亮色",
    value: "mapbox://styles/mapbox/streets-v12",
  },
  {
    label: "黑暗",
    value: "mapbox://styles/mapbox/dark-v11",
  },
  {
    label: "卫星",
    value: "mapbox://styles/mapbox/satellite-streets-v11",
  },
];
const handleStyleSelect = (value: string) => {
  mapBus.emit({ type: "style", value });
};
const handleConfirm = () => {
  const data = { ...mapStore.datasetInfo };
  delete data.layers;
  //@ts-ignore
  delete data.user;
  //@ts-ignore
  // data.location = WKT.convert(data.location);
  updateDataset(data)
    .then((res) => {
      message.success("修改成功");
    })
    .catch((e) => {
      message.error(`修改失败:${e}`);
    });

  console.log(data);
};
const handleDragEnd = (e) => {
  const center = e.target.getCenter();
  const zoom = e.target.getZoom();
  console.log(center, zoom);
  // console.log();
  dataset.value.scale = parseInt(zoom);
  dataset.value.location.coordinates = [center.lng, center.lat];
};
const handleRecord = () => {
  isRecord.value = true;
  mapBus.emit({
    type: "ref",
    callback: (map: Map) => {
      map.on("dragend", handleDragEnd);
    },
  });
};
const handleRecordComplete = () => {
  isRecord.value = false;
  mapBus.emit({
    type: "ref",
    callback: (map: Map) => {
      map.off("dragend", handleDragEnd);
    },
  });
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.user {
  display: flex;
  align-items: center;
  cursor: pointer;
  span {
    margin-right: 6px;
  }
}
.tab-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .top {
    flex: 1;
  }
  .bottom-button {
    width: 100%;
    margin-top: 10px;
  }
  .inline-item {
    height: 28px;
    line-height: 28px;
    text-align: left;
  }
}
</style>
